<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="150px" :disabled="isView">
      <el-form-item label="场馆名称" prop="venueName">
        <el-input v-model="form.venueName" placeholder="请输入场馆名称" />
      </el-form-item>
      <el-form-item label="场馆负责人" prop="managerName">
        <el-input v-model="form.managerName" placeholder="请输入场馆负责人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="managerTelno">
        <el-input v-model="form.managerTelno" type="number" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="年费">
        <el-input v-model="form.rentUnitPrice" type="number" placeholder="请输入年费" readonly />
      </el-form-item>
      <el-form-item label="租赁年限">
        <el-select v-model="form.rentDuration" @change="changeDate">
          <el-option v-for="v in venuePriceList" :key="v.id" :label="v.rentDuration+'年'" :value="v.rentDuration" />
        </el-select>
      </el-form-item>
      <el-form-item label="租赁费用">
        <el-input v-model="form.rentPrice" type="number" placeholder="请输入租赁费用" readonly />
      </el-form-item>
      <el-form-item label="优惠后价格" prop="finalPrice">
        <el-input v-model="form.finalPrice" type="number" placeholder="请输入优惠后价格" />
      </el-form-item>
      <el-form-item label="有效期" prop="validityStart">
        <el-date-picker v-model="form.validityStart" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" @change="changeDate" />
        至
        <el-date-picker v-model="form.validityEnd" readonly type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="是否关联到余额">
        <el-radio-group v-model="form.relateToBalance">
          <el-radio label="0">否</el-radio>
          <el-radio label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="关联场馆">
        <el-select v-model="form.venIds" multiple>
          <el-option v-for="v in venList" :key="v.id" :label="v.venueName" :value="v.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template v-if="!isView" #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { dayjs } from 'element-plus'
import { getVenueList, modifyVenue } from '@/api/oam/venue'


const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: ''
    })
  },
  venuePriceList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['submitForm'])

const formBase = {
  rentDuration: 1,
  relateToBalance: '0'
}
const data = reactive({
  form: {
    ...formBase
  },
  rules: {
    venueName: [{ required: true, message: '必填', trigger: 'blur' }],
    managerName: [{ required: true, message: '必填', trigger: 'blur' }],
    managerTelno: [{ required: true, message: '必填', trigger: 'blur' }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
    finalPrice: [{ required: true, message: '必填', trigger: 'blur' }],
    validityStart: [{ required: true, message: '必填', trigger: 'blur' }]
  },
  venList: []
})
const { open, title, isView } = toRefs(props.props)
const { form, rules, venList } = toRefs(data)

watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase }

    if (form.value.associateIds) {
      form.value.venIds = form.value.associateIds.split(',')
    }
    getVenueList().then(res => {
      _.remove(res.rows, (r) => {
        return r.id == form.value.id
      })
      venList.value = res.rows
    })

    changePrice()
  } else {
    proxy.resetForm('dialogRef')
  }
})

function changeDate() {
  if (form.value.validityStart) {
    const endTime = new Date(form.value.validityStart)
    endTime.setFullYear(endTime.getFullYear() + form.value.rentDuration)
    form.value.validityEnd = dayjs(endTime).format('YYYY-MM-DD')
  } else {
    form.value.validityEnd = ''
  }

  changePrice()
}

function changePrice() {
  const currRentDuration = _.find(props.venuePriceList, (v) => {
    return v.rentDuration == form.value.rentDuration
  })
  form.value.rentUnitPrice = currRentDuration.unitPrice
  form.value.rentPrice = currRentDuration.rentTotalPrice
  form.value.finalPrice = currRentDuration.finalPrice
}

function submitForm() {
  proxy.$refs['dialogRef'].validate(valid => {
    if (valid) {
      form.value.validPeriod = [form.value.validityStart, form.value.validityEnd].join(',')
      form.value.associateIds = (form.value.venIds || []).join(',')
      modifyVenue(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        open.value = false
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped>

</style>
